<template>
  <div id="app">

      <van-nav-bar
        title="不凡"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />

      <div class="rettop"></div>

      <ul>
        <li v-for="item in list" :key="item.id">
          <div v-html="item.content" class="images"></div>
        </li>
      </ul>
      
      <p class="zhuanti">专题推荐</p>

      <ul class="valList">
        <li v-for="val in list.recommendList" :key="val.id">
          <img :src="val.scene_pic_url" alt="">
          <p>{{val.title}}</p>
        </li>
      </ul>

  </div>
</template>

<script type="text/javascript">
import { details } from "@/api/topic/details/index.js";
export default {
  data() {
    return {
      list:[],
    };
  },
  methods: {
    onClickLeft(){
      this.$router.push({path: '/topic'})
    }
  },
  computed: {},
  components: {
  },
  async created() {
    var res = await details({
      id:this.$route.params.ida
    });
    this.list = res;
    console.log(res);
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
#app{
  background-color: #f4f4f4;
}
.van-nav-bar{
  width: 100%;
  height: 46px;
  position: fixed;
  top: 0;
  left: 0;
}
.rettop{
  height: 46px;
}

.zhuanti{
  height: 50px;
  line-height: 50px;
  color: #999;
  font-size: 16px;
}

.valList{
  li{
    width: 345px;
    height: 214px;
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  img{
    margin-top: 10px;
    width: 321px;
    height: 139px;
  }
  p{
    height: 19px;
    line-height: 19px;
    text-align: left;
    font-size: 14px;
    margin-left: 10px;
  }
}
</style>
